<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="../css/animate.css">
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">

            <input type="button" value="anniu" @click='isshow = !isshow'>
            <transition 
            enter-active-class='animated zoomInDown'
            leave-active-class='animated zoomOutDown'
            >
                <p v-if='isshow'>啦啦啦啦啦</p>
            </transition>
            <transition 
            enter-active-class='animated jello'
            leave-active-class='animated jello'
            >
                <p v-if='isshow'>嘿嘿嘿嘿嘿嘿</p>
            </transition>


        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    isshow : true,
                }
            })
        </script>
    </body>
</html>